<template>
    <div class="bg">
        <div class="header">
            <div class="header-btnLeft" @click="$router.go(-1)" ><img src="../assets/back-btn.png"></div>
            <h1 class="header-title">邮箱找回密码</h1>
            <div class="header-btnRight"></div>
        </div>
        <div class="h120"></div>
        <div class="login">
            <div class="login-item"><input type="text" v-model.trim="email" name="email" placeholder="请输入您的邮箱"/></div>
        </div>

        <div  class="login-btn">
            <button  class="login-btn-login" @click="getCode">发送验证码</button>

            <div class="login-other">
                <router-link to="./my-reg-agreement">注册即代表同意<span class="login-other-agr">《用户注册协议》</span></router-link>
            </div>
        </div>



    </div>
</template>

<script>
    import { Toast } from 'mint-ui';
    export default {
        name: "My-get-password-email-code",
        data(){
            return{
                email:'',
            }
        },
        methods:{
            getCode() {
                var regEmail = new RegExp("^([A-Za-z0-9_\\-\\.])+\\@([A-Za-z0-9_\\-\\.])+\\.([A-Za-z]{2,4})$");
                if (!regEmail.test(this.email)) {
                    Toast({message: '请输入正确的邮箱',duration: 1000});
                    return false;
                }
                this.$router.push({path:'/my-get-password-email-code'})
            },
        }
    }
</script>

<style lang="scss" scoped>
    @import "../assets/base";
    .bg{
        background: $bgcolor1;
        min-height: 100%;
    }
    .h30 {
        height: rpx(30);
        background: $bgcolor1
    }
    .h120 {
        height: rpx(120);
        background: $bgcolor1;
    }
    .header{
        display: flex;
        align-items: center;
        padding: rpx(10) rpx(30);
        justify-content: space-between;
        background:$color0;
        &-btnLeft{
            width: rpx(64);
            height: rpx(64);
            padding-top: rpx(16);
            img{
                width: rpx(32);
                height: rpx(32);
            }
        }
        &-btnRight:after{
            display: block;
            content: ' ';
            width: rpx(64);
            height: rpx(64);
        }
        &-title{
            flex: 1;
            font-size: rpx(36);
            text-align: center;
            font-weight: normal;
        }
    }
    .login{
        margin: rpx(30);
        background: $color0;
        &-item{
            border-bottom: solid 1px $color2;
            padding: rpx(20) 0;
            &:last-child{
                border-bottom:none;
            }
            input{
                padding: rpx(10) rpx(30);
                font-size: rpx(34);
            }
        }
        &-btn{
            padding: rpx(30);
            &-login{
                display: block;
                margin-bottom: rpx(30);
                border: none;
                width: 100%;
                height: rpx(100);
                line-height: rpx(100);
                background: $color3;
                border-radius: $radius6;
                color: $color0;
                font-size: rpx(34);
                text-align: center;
            }
        }
        &-other{
            display: flex;
            padding: rpx(30) rpx(10);
            font-size: rpx(30);
            &-agr{
                color: $color3;
            }
        }
    }



</style>